<template>
  <div class="content-wraper">
    <el-row class="content">
      <el-col :span="6" class="content-left">
        <tree-box
          v-model="selectedNode"
          :data="data"
          title="组织机构"
        />
      </el-col>
      <el-col :span="18" class="content-right">
        <div class="btns">
          <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
          <!-- <el-button type="danger" icon="el-icon-delete" @click="del">删除</el-button> -->
          <!-- <el-checkbox v-model="checked" style="margin-left: 10px;">显示禁用机构</el-checkbox> -->
        </div>
        <div class="detail">
          <com-table :data="userData" :columns="columns" :total="total" @pageChange="pageChange">
            <template v-slot:sex="{row: {sex}}">
              {{ sex ? '男' : '女' }}
            </template>
            <template v-slot:option="{row}">
              <el-button type="warning" icon="el-icon-edit-outline" size="mini" @click="editOrganization(row)">机构</el-button>
              <el-button type="success" icon="el-icon-edit-outline" size="mini" @click="editRole(row)">角色</el-button>
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(row)">删除</el-button>
            </template>
          </com-table>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :close-on-click-modal="false"
      :title="optType === 'add' ? '新增人员' : '编辑人员'"
      :visible.sync="modalVisibile"
      width="700px"
      center
    >
      <div><el-tag type="success">所属机构：{{ selectedNode && selectedNode.name }}</el-tag></div>
      <add-user ref="form" :data="editData" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="modalVisibile = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
    <editRole :show-modal.sync="showRoleModal" :data="editData" />
    <editOrganization :show-modal.sync="showEditOrganization" :data="organizationDetail" />
  </div>
</template>

<script>
import TreeBox from '@/components/TreeBox'
import addUser from './components/addUser.vue'
import editRole from './components/editRole.vue'
import editOrganization from './components/editOrganization.vue'
import {
  getOrganizationTree,
  getUserList,
  addUser as addUserApi,
  updateUser,
  deleteUser
} from '@/api/manage'
export default {
  name: 'UserManage',
  components: {
    TreeBox,
    addUser,
    editRole,
    editOrganization
  },
  data() {
    return {
      showRoleModal: false,
      checked: false,
      data: [],
      showEditOrganization: false,
      organizationDetail: {},
      userData: [],
      columns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '账号',
          prop: 'account'
        },
        {
          label: '工号',
          prop: 'number'
        },
        {
          label: '性别',
          prop: 'sex',
          slot: 'sex'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '350',
          slot: 'option'
        }
      ],
      editData: {},
      filterText: '',
      selectedNode: null,
      modalVisibile: false,
      optType: 'add',
      pageParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    selectedNode(newValue) {
      this.getUserList()
    },
    modalVisibile(val) {
      if (!val) {
        this.$refs.form.resetForm()
      }
    }
  },

  mounted() {
    this.initTree()
  },
  methods: {
    pageChange(data) {
      this.pageParams = data
      this.getUserList()
    },
    editOrganization(data) {
      this.organizationDetail = data
      this.showEditOrganization = true
    },
    getUserList() {
      const { id } = this.selectedNode
      const params = {
        ...this.pageParams,
        organizationId: id

      }
      getUserList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.userData = data
          this.total = total - 0
        }
      })
    },
    initTree() {
      getOrganizationTree().then(res => {
        const { nodes } = res.data || {}
        this.data = nodes || []
      })
    },
    add() {
      if (!this.selectedNode) {
        this.$message({
          type: 'error',
          message: '请选择一个机构!'
        })
        return
      }
      this.optType = 'add'
      this.modalVisibile = true
    },
    edit(data) {
      this.optType = 'edit'
      this.editData = data
      this.modalVisibile = true
    },
    editRole(data) {
      this.editData = data
      this.showRoleModal = true
    },
    del(data) {
      this.$confirm('确定要删除该用户吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser({
          userId: data.id
        }).then(res => {
          const { code, msg } = res
          if (code === '0001') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getUserList()
          } else {
            this.$message({
              type: 'error',
              message: msg || '删除失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    save() {
      this.$refs.form.validateForm(valid => {
        if (valid) {
          const organizationId = this.optType === 'add' ? this.selectedNode.id
            : this.editData.organizationId
          const params = {
            ...this.$refs.form.form,
            ...this.optType === 'edit' ? {
              id: this.editData.id
            } : {},
            organizationId
          }
          const saveFn = this.optType === 'add' ? addUserApi : updateUser
          saveFn(params).then(res => {
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.modalVisibile = false
              this.$refs.form.resetForm()
              this.getUserList()
              // this.initTree()
            } else {
              this.$message({
                type: 'error',
                message: msg || res.msg
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  height:100%;
  .content-left,.content-right{
    height: 100%;
  }
  .content-left{
    padding-right: 10px;
    border-right: 1px solid #dedede;
  }
  .content-right{
    padding-left: 10px;
    .detail{
      height: calc(100% - 40px);
      margin-top: 10px;
      overflow: auto;
    }
  }
  .tree{
    height: calc(100% - 40px);
    padding-top: 10px;
  }
}
</style>
